<!DOCTYPE html>
<html>

<body>

  <p id="demo">原始文本</p>

  <button onclick="changeText()">修改文本</button>

  <script>
    function changeText() {
      document.getElementById("demo").innerHTML = "新的文本内容";
    }
    /*
     1. document 对象
在浏览器环境中，document 对象代表整个 HTML 文档。它是文档对象模型（DOM）的入口，借助 document 对象，你能够访问和操控 HTML 文档中的所有元素。
2. getElementById() 方法
这是 document 对象的一个方法，其功能是通过元素的 id 属性来查找 HTML 文档里的元素。
具体而言，getElementById("demo") 会查找 id 属性值为 "demo" 的元素。每个 HTML 文档里的 id 应当是唯一的，所以这个方法只会返回一个元素节点。
3. innerHTML 属性
它属于元素节点的属性，可用于获取或者设置元素内部的 HTML 内容。当使用赋值语句 innerHTML = ... 时，就会把元素内部原有的 HTML 内容替换成新的值。 
    */
  </script>

</body>

</html>